<template>
	<view class="add-resume">
		<cu-custom isBack="true">
			<block slot="content">个人资料</block>
		</cu-custom>
		<view class="list-content">
			<view class="cu-list menu sm-border from-body padding-top-sm">

				<view class="cu-item from-item arrow">
					<view class="content from-content">
						<text class="from-icon iconfont icon-touxiang"></text>
						<view class="from-title">头像</view>
					</view>
					<view class="action from-action">
						<image class="cu-avatar round form-avatar" @tap="setUsererHead" :src="resumeInfo.user_head_img"
							mode="aspectFill"></image>
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-xingming1"></text>
						<view class="from-title">姓名</view>
					</view>
					<view class="action from-action">
						<input class="from-input" placeholder="请输入你的名称" v-model="resumeInfo.user_name" />
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-qiuzhizhuangtai"></text>
						<view class="from-title">当前求职状态</view>
					</view>
					<view class="action from-action">
						<input class="from-input" placeholder="请输入你的当前求职状态" v-model="resumeInfo.job_status" />
					</view>
				</view>

				<view class="cu-item from-item arrow">
					<view class="content from-content">
						<text class="from-icon iconfont icon-xingbie"></text>
						<view class="from-title">性别</view>
					</view>
					<view class="action from-action">
						<cc-picker :range="sexTypeList" v-model="resumeInfo.user_sex"></cc-picker>
					</view>

				</view>

				<view class="cu-item from-item arrow">
					<view class="content from-content">
						<text class="from-icon iconfont icon-chushengnianyue"></text>
						<view class="from-title">出生日期</view>
					</view>
					<view class="action from-action">
						<picker class="from-picker" mode="date" :value="resumeInfo.user_birthday" :start="startTime"
							:end="endTime" @change="pickerChange($event,'birthday')">
							<view class="picker">
								<text v-if="resumeInfo.user_birthday">
									{{resumeInfo.user_birthday}}
								</text>
								<text v-else class="placeholder-picker">
									请选择出生日期
								</text>
							</view>
						</picker>
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-shouji"></text>
						<view class="from-title">电话</view>
					</view>
					<view class="action from-action">
						<input class="from-input" type="number" placeholder="请输入你的电话" v-model="resumeInfo.user_phone" />
					</view>
				</view>

			</view>

			<view class="cu-list menu sm-border from-body padding-top-sm">
				<view class="cu-item from-item arrow">
					<view class="content from-content">
						<text class="from-icon iconfont icon-canjiagongzuoshijian"></text>
						<view class="from-title">参加工作时间</view>
					</view>
					<view class="action from-action">
						<picker class="from-picker" mode="date" :value="resumeInfo.working_hours" :start="startTime"
							:end="endTime" @change="pickerChange($event,'hours')">
							<view class="picker">
								<text v-if="resumeInfo.working_hours">
									{{resumeInfo.working_hours}}
								</text>
								<text v-else class="placeholder-picker">
									请选择参加工作时间
								</text>
							</view>
						</picker>
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-weixinhao"></text>
						<view class="from-title">微信号</view>
					</view>
					<view class="action from-action">
						<input class="from-input" placeholder="请输入你的微信号" v-model="resumeInfo.user_wechat" />
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-youxiang"></text>
						<view class="from-title">邮箱</view>
					</view>
					<view class="action from-action">
						<input class="from-input" placeholder="请输入你的邮箱" v-model="resumeInfo.user_mail" />
					</view>
				</view>
			</view>
			<view class="cu-list menu sm-border from-body padding-top-sm">

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-qiwangzhiwei"></text>
						<view class="from-title">期望岗位</view>
					</view>
					<view class="action from-action">
						<input class="from-input" placeholder="请输入你的期望岗位" v-model="resumeInfo.expected_position" />
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-Salary"></text>
						<view class="from-title">薪资要求</view>
					</view>
					<view class="action from-action">
						<salary-picker :salary="resumeInfo.salary_requirements"
							@pickerChange="pickerChange($event,'salary')">
						</salary-picker>
					</view>
				</view>

				<view class="cu-item from-item">
					<view class="content from-content">
						<text class="from-icon iconfont icon-chengshi"></text>
						<view class="from-title">所在城市</view>
					</view>
					<view class="action from-action">
						<picker class="from-picker" mode="region" :value="resumeInfo.user_location"
							@change="pickerChange($event,'location')">
							<view class="picker">
								{{resumeInfo.user_location.join("")}}
							</view>
						</picker>
					</view>
				</view>

			</view>
		</view>

		<footer-btn @submit="nextClickHandle">
			<text slot="text">
				<block v-if="pageType=='add'">
					下一步
				</block>
				<block v-if="pageType=='update'">
					确认
				</block>
			</text>
		</footer-btn>


		<canvas canvas-id="canvas" :style="{width:cWidth+'px',height:cHeight+'px'}"
			style="position: absolute;left:-1000px;top:-1000px;"></canvas>
	</view>
</template>

<script>
	import footerBtn from '../../components/footer-btn/footer-btn.vue';
	import salaryPicker from '../../components/salary-picker/salary-picker.vue';
	import {
		imgZip
	} from '../../util/mixins.js';
	export default {
		mixins: [imgZip],
		components: {
			footerBtn,
			salaryPicker
		},
		data() {
			return {
				sexTypeList: ['男', '女', '未知'],
				startTime: this.$comm.getDateByYear(-50),
				endTime: this.$comm.getDateByYear(),
				resumeInfo: {
					user_name: '',
					user_head: '',
					user_head_img: '',
					job_status: '',
					user_sex: '未知',
					user_birthday: '',
					user_phone: '',
					user_wechat: '',
					user_mail: '',
					user_location: ["四川省", "成都市", "郫都区"],
					working_hours: '',
					salary_requirements: ['面议', '面议']
				},
				pageType: ''
			};
		},
		onLoad(option) {
			let {
				pageType = 'add'
			} = option
			if (pageType == 'update') {
				let info = this.$store.getters['update/getInfoData']
				this.resumeInfo = Object.assign(this.resumeInfo, info)
			} else {
				this.$store.commit('add/clearAddData')
			}
			this.pageType = pageType

		},
		methods: {
			setUsererHead() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						let {
							tempFilePaths
						} = res
						uni.showLoading({
							title: "上传中"
						})
						this.img_zip(tempFilePaths[0]).then(async res => {
							if (res) {
								const filePath = res
								const cloudPath = Date.now() + filePath.match(/\.[^.]+?$/)[0]
								const {
									fileID
								} = await uniCloud.uploadFile({
									filePath: filePath,
									cloudPath: cloudPath
								})

								let result = await uniCloud.getTempFileURL({
									fileList: [fileID]
								});

								this.resumeInfo.user_head = fileID
								this.resumeInfo.user_head_img = result.fileList[0].tempFileURL
								this.$comm.successToShow("上传成功")
							}
						})
					}
				});
			},
			pickerChange(e, type) {
				let objValue = {
					key: '',
					value: ''
				}
				switch (type) {
					case 'salary':
						objValue = {
							key: 'salary_requirements',
							value: e
						}
						break;
					case 'location':
						objValue = {
							key: 'user_location',
							value: e.detail.value
						}
						break;
					case 'birthday':
						objValue = {
							key: 'user_birthday',
							value: e.detail.value
						}
						break;
					case 'hours':
						objValue = {
							key: 'working_hours',
							value: e.detail.value
						}
						break;
				}
				if (objValue.key) {
					this.resumeInfo[objValue.key] = objValue.value
				}
			},
			async nextClickHandle() {
				let resumeInfo = JSON.parse(JSON.stringify(this.resumeInfo))
				let valLoginRes = this.$validate.validate(resumeInfo, [{
						name: 'user_name',
						type: 'required',
						errmsg: '用户姓名不能为空'
					},
					{
						name: 'job_status',
						type: 'required',
						errmsg: '当前求职状态不能为空'
					},
					{
						name: 'user_birthday',
						type: 'required',
						errmsg: '出生日期不能为空'
					},
					{
						name: 'user_phone',
						type: 'required',
						errmsg: '用户手机号不能为空'
					},
					{
						name: 'user_phone',
						type: 'phone',
						errmsg: '用户手机号不符合规则'
					},
					{
						name: 'user_wechat',
						type: 'required',
						errmsg: '用户微信不能为空'
					},
					{
						name: 'working_hours',
						type: 'required',
						errmsg: '用户参加工作时间不能为空'
					},
					{
						name: 'user_wechat',
						type: 'required',
						errmsg: '用户微信不能为空'
					},
					{
						name: 'expected_position',
						type: 'required',
						errmsg: '期望岗位不能为空'
					}
				])
				if (!valLoginRes.isOk) {
					this.$comm.errorToShow(valLoginRes.errmsg)
					return false
				}
				if (this.pageType == 'update') {
					this.$comm.navigateBack(1, () => {
						uni.$emit('updateInfo', resumeInfo)
					})

				} else if (this.pageType == 'add') {
					this.$store.commit('add/setInfoData', resumeInfo)
					this.$comm.redirectTo("/pages/school-experience/school-experience")
				}

			}
		}
	}
</script>

<style lang="scss">
	.add-resume {
		background-color: $index-bgEE;

		.cu-list.from-body {

			&.cu-list+.cu-list {
				margin-top: 0rpx;
			}

			.from-item.from-item {
				padding-right: 20upx;
				width: 100%;
				display: flex;
				align-items: center;
				height: 110rpx;
				overflow: hidden;

				&.arrow {
					padding-right: 50upx;

					&::before {
						right: 10upx;
					}
				}


				&:last-child::after {
					border: none;
				}

				&::after {
					border-bottom: 4upx solid $border-cBBB;
					width: calc(200% - 80rpx);
				}


				.from-content {
					background-color: #ffffff;
					display: flex;
					align-items: center;
					min-height: 100upx;
					justify-content: space-between;
					flex: 0 1 auto;
					height: 100%;

					.from-title {
						text-align: justify;
						padding-left: 0upx;
						font-size: 32upx;
						position: relative;
						color: $font-c10;
					}

					.from-icon {
						color: $font-c10;
						font-size: 32upx;
						margin-right: 8upx;
						width: 34upx;
					}
				}

				.from-action {
					flex: 1;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					height: 100%;
					overflow: hidden;

					.form-avatar {
						width: 76upx;
						height: 76upx;
						display: flex;
						align-items: center;
					}

					.from-input {
						flex: 1;
						font-size: 28upx;
						color: $font-c10;
						text-align: right;
						overflow: hidden;
					}

					.from-picker {
						width: 100%;

						.picker {
							line-height: 110upx;
							text-align: right;
							height: 100%;
							padding-left: 30upx;
							font-size: 28rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							width: 100%;
							text-align: right;
						}

						.placeholder-picker {
							color: rgb(128, 128, 128);
							font-size: 28upx;
						}
					}
				}
			}
		}
	}
</style>
